<template>
    <div class="app-container shop-detail">
        <!-- <div class="head-title">{{$t('shopProcess.merchantDetail')}}</div> -->
        <!-- 导航栏 -->
        <div class="nav-box">
            <div class="nav">
                <div :class="['nav-item', navStatus === 0 ? 'active' : '']" @click="switchNav(0)">{{
                    $t('shopProcess.basicInfo') }}
                </div>
                <div :class="['nav-item', navStatus === 1 ? 'active' : '']" @click="switchNav(1)">{{
                    $t('shopProcess.businessInfo') }}
                </div>
                <div :class="['nav-item', navStatus === 2 ? 'active' : '']" @click="switchNav(2)">{{
                    $t('shopProcess.signUpInfo') }}
                </div>
                <div :class="['nav-item', navStatus === 3 ? 'active' : '']" @click="switchNav(3)">{{
                    $t('shopProcess.financeInfo') }}
                </div>
            </div>
        </div>
        <!-- 模块 -->
        <div class="shop-info-box">
            <!-- 基本信息 -->
            <div v-if="navStatus === 0" class="basic-info-mod">
                <!-- 店铺审核状态 -->
                <div class="audit-status">
                    <!-- status 0 未审核 1已通过 -1未通过 2平台下线 3 平台下线待审核 -->
                    <!-- shopStatus 店铺状态(-1:已删除 0: 停业中 1:营业中 2:平台下线 3:待审核 4:店铺申请中 5.审核失败) -->
                    <div v-if="shopAuditStatus" class="audit-item">
                        <span>{{ $t('shopProcess.auditStatus') }}：</span>
                        <span v-if="shopAuditStatus.status === -1">{{ $t('shop.failed') }}</span>
                        <span v-if="shopAuditStatus.status === 0">{{ $t('shop.unreviewed') }}</span>
                        <span v-if="shopAuditStatus.status === 1">{{ $t('shop.passed') }}</span>
                        <span v-if="shopAuditStatus.status === 2">{{ $t('shop.platformOffline') }}</span>
                    </div>
                    <div class="audit-item">
                        <span>{{ $t('shopProcess.accountStatus') }}：</span>
                        <span v-if="shopBasicInfo.accountStatus === 0">{{ $t('shopProcess.disable') }}</span>
                        <span v-if="shopBasicInfo.accountStatus === 1">{{ $t('shopProcess.enable') }}</span>
                        <span v-if="shopBasicInfo.accountStatus === -1">{{ $t('shopProcess.delete') }}</span>
                    </div>
                    <div class="audit-item">
                        <span>{{ $t('shopProcess.shopStatus') }}：</span>
                        <span v-if="shopBasicInfo.shopStatus === -1">{{ $t('shopProcess.deleted') }}</span>
                        <span v-if="shopBasicInfo.shopStatus === 0">{{ $t('shopProcess.closed') }}</span>
                        <span v-if="shopBasicInfo.shopStatus === 1">{{ $t('shopProcess.inOperation') }}</span>
                        <span v-if="shopBasicInfo.shopStatus === 2">{{ $t('shop.platformOffline') }}</span>
                        <span v-if="shopBasicInfo.shopStatus === 3">{{ $t('shopProcess.onlinePendingReview') }}</span>
                        <span v-if="shopBasicInfo.shopStatus === 4">{{ $t('shopProcess.shopApplication') }}</span>
                        <span v-if="shopBasicInfo.shopStatus === 5">{{ $t('shopProcess.storeOpenPendingReview') }}</span>
                    </div>
                </div>
                <!-- 信息 -->
                <div class="basic-info-list">
                    <el-form
                            ref="shopBasicInfo"
                            label-width="120px"
                            :model="shopBasicInfo"
                            :rules="shopBasicInfoRules"
                            size="small"
                    >
                        <div class="basic-info-box">
                            <div class="left-info">
                                <el-form-item :label="this.$i18n.t('shopProcess.merchantName')" prop="merchantName">
                                    <p class="txt">
                                        <el-input
                                                v-model="shopBasicInfo.merchantName"
                                                :placeholder="this.$i18n.t('shopProcess.merchantNameInputTips')"
                                                maxlength="10"
                                                @blur="
                        shopBasicInfo.merchantName =
                        shopBasicInfo.merchantName ?
                        removeHeadAndTailSpaces(shopBasicInfo.merchantName) :
                        shopBasicInfo.merchantName
                      "
                                        />
                                    </p>
                                </el-form-item>
                                <el-form-item :label="this.$i18n.t('shopProcess.shopName')" prop="shopName">
                                    <p class="txt">
                                        <el-input
                                                v-model="shopBasicInfo.shopName"
                                                :placeholder="this.$i18n.t('shopProcess.shopNameInputTips')"
                                                maxlength="20"
                                                @blur="
                        shopBasicInfo.shopName =
                        shopBasicInfo.shopName ?
                        removeHeadAndTailSpaces(shopBasicInfo.shopName) :
                        shopBasicInfo.shopName
                      "
                                        />
                                    </p>
                                </el-form-item>
                                <el-form-item label="行业类型" prop="industryType">
                                    <el-select style="width: 100%;" v-model="shopBasicInfo.industryType"
                                               placeholder="请选择行业类型">
                                        <el-option v-for="(item,index) in industryTypeList"
                                                   :key="index"
                                                   :label="item.title"
                                                   :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="店铺类型" prop="storeType">
                                    <el-select style="width: 100%;" v-model="shopTypes" multiple placeholder="请选择店铺类型">
                                        <el-option
                                                v-for="(item,index) in shopTypeList"
                                                :key="index"
                                                :label="item.title"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <!-- <el-form-item label="联系人：" prop="contactName">
                                  <p class="txt">
                                    <el-input v-model="shopBasicInfo.contactName" placeholder="请输入常用联系人姓名" maxlength="10" />
                                  </p>
                                </el-form-item> -->
                                <el-form-item :label="this.$i18n.t('shopProcess.tel')" prop="tel">
                                    <p class="txt">
                                        <el-input v-model="shopBasicInfo.tel" maxlength="11"
                                                  :placeholder="this.$i18n.t('shopProcess.telInputTips')"/>
                                    </p>
                                </el-form-item>
                                <el-form-item :label="this.$i18n.t('shopProcess.email')" prop="email">
                                    <p class="txt">
                                        <el-input v-model="shopBasicInfo.email"
                                                  :placeholder="this.$i18n.t('shopProcess.emailInputTips')"
                                                  maxlength="30"/>
                                    </p>
                                </el-form-item>

                                <el-form-item :label="this.$i18n.t('shopProcess.addr')" prop="currentAddr">
                                    <el-cascader
                                            ref="cascaderAddr"
                                            v-model="shopBasicInfo.currentAddr"
                                            :options="addrList"
                                            :props="addrListTreeProps"
                                            :placeholder="this.$i18n.t('shopProcess.addrInputTips')"
                                            class="addr-select"
                                            @change="handleAddrChange"
                                    />
                                </el-form-item>

                                <el-form-item :label="this.$i18n.t('shopProcess.detailAddr')" prop="shopAddress">
                                    <el-input
                                            v-model="shopBasicInfo.shopAddress"
                                            :placeholder="this.$i18n.t('shopProcess.detailAddrInputTips')"
                                            maxlength="50"
                                            @blur="
                      shopBasicInfo.shopAddress =
                      shopBasicInfo.shopAddress ?
                      removeHeadAndTailSpaces(shopBasicInfo.shopAddress) :
                      shopBasicInfo.shopAddress; shopAddressChange()
                    "
                                    >
                                        <el-button slot="append" icon="el-icon-location" @click="mapLocation">{{
                                            $t('platform.location') }}
                                        </el-button>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="楼层" prop="floor">
                                    <el-input
                                            v-model="shopBasicInfo.floor"
                                            placeholder="请输入楼层"
                                            maxlength="50"
                                    >
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="房号" prop="roomNumber">
                                    <el-input
                                            v-model="shopBasicInfo.roomNumber"
                                            placeholder="请输入房号"
                                            maxlength="50"
                                    >
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="排序" prop="sort">
                                    <el-input-number
                                            v-model="shopBasicInfo.sort"
                                            placeholder="请输入排序"
                                            maxlength="50"
                                            style="width: 400px;"
                                    >
                                    </el-input-number>
                                </el-form-item>
                                <!-- 地图 -->
                                <el-form-item>
                                    <baidu-map
                                            ref="baiduMp"
                                            class="map"
                                            :scroll-wheel-zoom="false"
                                            :center="center"
                                            @moving="syncCenterAndZoom"
                                            @moveend="syncCenterAndZoom"
                                            @zoomend="syncCenterAndZoom"
                                            @ready="handler"
                                            :zoom="zoom"
                                    >
                                        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                                        <bm-marker :position="center" :dragging="false" @click="infoWindowOpen">
                                            <bm-info-window :show="show" @close="infoWindowClose"
                                                            @open="infoWindowOpen">{{ $t('shop.storeLocation') }}
                                            </bm-info-window>
                                        </bm-marker>
                                    </baidu-map>
                                </el-form-item>
                                <el-form-item :label="this.$i18n.t('shopProcess.intro')" prop="intro">
                                    <div class="business-license-box">
                                        <div class="license-content">
                                            <el-input
                                                    v-model="shopBasicInfo.intro"
                                                    type="textarea"
                                                    :rows="4"
                                                    maxlength="200"
                                                    :placeholder="this.$i18n.t('shopProcess.introInput')"
                                                    @blur="
                          shopBasicInfo.intro =
                          shopBasicInfo.intro ?
                          removeHeadAndTailSpaces(shopBasicInfo.intro) :
                          shopBasicInfo.intro
                        "
                                            />
                                        </div>
                                    </div>
                                </el-form-item>
                            </div>

                            <div class="right-info">
                                <el-form-item :label="this.$i18n.t('shopProcess.logo')" prop="shopLogo">
                                    <div class="business-license-box">
                                        <div class="license-content">
                                            <img-upload v-model="shopBasicInfo.shopLogo"/>
                                        </div>
                                        <div class="upload-tips">{{ $t('shopProcess.logoTips') }}</div>
                                    </div>
                                </el-form-item>
                                <!-- 背景图 -->
                                <!-- <div class="bg-img">
                                  <div class="business-license-box">
                                    <el-form-item :label="this.$i18n.t('shopProcess.backgroundPic')" prop="mobileBackgroundPic">
                                      <div class="license-content">
                                        <img-upload v-model="shopBasicInfo.mobileBackgroundPic" />
                                      </div>
                                      <div class="img-tips">
                                        <p>{{ $t('shopProcess.mobileBackgroundPic') }}</p>
                                        <p>{{ $t('shopProcess.mobilePicTips') }}</p>
                                      </div>
                                    </el-form-item>
                                  </div>
                                  <div class="business-license-box">
                                    <el-form-item label-width="0px" prop="pcBackgroundPic">
                                      <div class="license-content">
                                        <img-upload v-model="shopBasicInfo.pcBackgroundPic" />
                                      </div>
                                      <div class="img-tips">
                                        <p>{{ $t('shopProcess.pcBackgroundPic') }}</p>
                                        <p>{{ $t('shopProcess.pcPicTips') }}</p>
                                      </div>
                                    </el-form-item>
                                  </div>
                                </div> -->

                                <!-- <el-form-item :label="this.$i18n.t('shopProcess.businessLicense')" prop="businessLicense">
                                  <div class="business-license-box">
                                    <div class="license-content">
                                      <img-upload v-model="shopBasicInfo.businessLicense" />
                                      <div class="example-box">
                                        <img src="~@/assets/img/example-img/Business-license.png">
                                        <div class="tips">{{ $t('shopProcess.example') }}</div>
                                      </div>
                                    </div>
                                    <div class="upload-tips">{{ $t('shopProcess.logoTips') }}</div>
                                  </div>
                                </el-form-item> -->
                                <!-- <div class="id-box">
                                  <div class="upload-content">
                                    <div class="upload-img" :class="lang === 'en' ? 'en-upload-img' : 'zh-upload-img'">
                                      <el-form-item class="idcard" :label="this.$i18n.t('shopProcess.corporateIdentityCard')" prop="identityCardFront">
                                        <img-upload
                                          v-model="shopBasicInfo.identityCardFront"
                                        />
                                      </el-form-item>
                                      <el-form-item class="idcard" label-width="0px" prop="identityCardLater">
                                        <img-upload
                                          v-model="shopBasicInfo.identityCardLater"
                                        />
                                      </el-form-item>
                                    </div>
                                    <div class="upload-example">
                                      <div class="example-box">
                                        <img src="~@/assets/img/example-img/idcard1.png">
                                        <div class="tips">{{ $t('shopProcess.identityCardFront') }}</div>
                                      </div>
                                      <div class="example-box">
                                        <img src="~@/assets/img/example-img/idcard2.png">
                                        <div class="tips">{{ $t('shopProcess.identityCardLater') }}</div>
                                      </div>
                                    </div>
                                    <div class="upload-tips">{{ $t('shopProcess.identityCardTips') }}</div>
                                  </div>
                                </div> -->
                            </div>
                        </div>

                    </el-form>
                </div>

                <div class="default-btn primary-btn foot-btn" @click="updateShopBasicInfo">{{
                    $t('shopProcess.saveBasicInfo') }}
                </div>
            </div>
            <!-- /基本信息 -->

            <!-- 工商信息 -->
            <div v-if="navStatus === 1" class="business-info-mod">
                <el-form
                        ref="companyInfoForm"
                        :model="companyInfoForm"
                        :rules="companyInfoRule"
                        :label-width="lang === 'en' ? '200px' : '150px'"
                        size="small"
                >
                    <div class="ci-wrapper">
                        <div class="left-info">
                            <el-form-item :label="this.$i18n.t('shopProcess.creditCode')" prop="creditCode">
                                <el-input v-model="companyInfoForm.creditCode" maxlength="20"
                                          :placeholder="this.$i18n.t('shopProcess.creditCodeInputTips')"/>
                            </el-form-item>
                            <el-form-item :label="this.$i18n.t('shopProcess.firmName')" prop="firmName">
                                <el-input
                                        v-model="companyInfoForm.firmName"
                                        maxlength="50"
                                        :placeholder="this.$i18n.t('shopProcess.firmNameInputTips')"
                                        @blur="
                    companyInfoForm.firmName =
                    companyInfoForm.firmName ?
                    removeHeadAndTailSpaces(companyInfoForm.firmName) :
                    companyInfoForm.firmName
                  "
                                />
                            </el-form-item>
                            <el-form-item :label="this.$i18n.t('shopProcess.residence')" prop="residence">
                                <el-input
                                        v-model="companyInfoForm.residence"
                                        maxlength="50"
                                        :placeholder="this.$i18n.t('shopProcess.residenceInputTips')"
                                        @blur="
                    companyInfoForm.residence =
                    companyInfoForm.residence ?
                    removeHeadAndTailSpaces(companyInfoForm.residence) :
                    companyInfoForm.residence
                  "
                                />
                            </el-form-item>
                            <el-form-item :label="this.$i18n.t('shopProcess.representative')" prop="representative">
                                <el-input
                                        v-model="companyInfoForm.representative"
                                        prop="representative" maxlength="20"
                                        :placeholder="this.$i18n.t('shopProcess.representativeInputTips')"
                                        @blur="
                    companyInfoForm.representative =
                    companyInfoForm.representative ?
                    removeHeadAndTailSpaces(companyInfoForm.representative) :
                    companyInfoForm.representative
                  "
                                />
                            </el-form-item>
                            <el-form-item :label="this.$i18n.t('shopProcess.capital')">
                                <div class="capital-int">
                                    <el-input
                                            v-model="companyInfoForm.capital"
                                            prop="capital"
                                            type="number"
                                            :min="0"
                                            :max="99999999"
                                            @blur="changeNum"
                                            @keydown.native="channelInputLimit"
                                    >
                                        <el-button slot="append">{{ $t('shopProcess.tenThousandYuan') }}</el-button>
                                    </el-input>
                                </div>
                            </el-form-item>
                            <el-form-item :label="this.$i18n.t('shopProcess.fountTime')" prop="foundTime">
                                <el-date-picker
                                        v-model="companyInfoForm.foundTime"
                                        type="date"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        :placeholder="this.$i18n.t('platform.seleData')"
                                        :picker-options="pickerOptions"
                                />
                            </el-form-item>
                            <el-form-item :label="this.$i18n.t('shopProcess.businessTime')" prop="timeRange">
                                <el-date-picker
                                        v-model="companyInfoForm.timeRange"
                                        type="daterange"
                                        :range-separator="this.$i18n.t('date.tip')"
                                        :start-placeholder="this.$i18n.t('shopProcess.startTime')"
                                        :end-placeholder="this.$i18n.t('shopProcess.endTime')"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        @input="handleTimeData"
                                        :clearable="false"
                                />
                            </el-form-item>
                            <el-form-item :label="this.$i18n.t('shopProcess.businessScope')" prop="businessScope">
                                <el-input
                                        v-model="companyInfoForm.businessScope"
                                        type="textarea"
                                        resize="none"
                                        :rows="4"
                                        :placeholder="this.$i18n.t('shopProcess.businessScopeInputTips')"
                                        maxlength="500"
                                        @blur="
                    companyInfoForm.businessScope =
                    companyInfoForm.businessScope ?
                    removeHeadAndTailSpaces(companyInfoForm.businessScope) :
                    companyInfoForm.businessScope
                  "
                                />
                            </el-form-item>
                        </div>
                        <div class="right-info">
                            <el-form-item :label="this.$i18n.t('shopProcess.businessLicense')" prop="businessLicense">
                                <div class="business-license-box">
                                    <div class="license-content">
                                        <img-upload v-model="companyInfoForm.businessLicense"/>
                                        <div class="example-box">
                                            <img src="~@/assets/img/example-img/Business-license.png">
                                            <div class="tips">{{ $t('shopProcess.example') }}</div>
                                        </div>
                                    </div>
                                    <div class="upload-tips">{{ $t('shopProcess.logoTips') }}</div>
                                </div>
                            </el-form-item>
                            <div class="id-box">
                                <div class="upload-content">
                                    <div class="upload-img" :class="lang === 'en' ? 'en-upload-img' : 'zh-upload-img'">
                                        <el-form-item class="idcard"
                                                      :label="this.$i18n.t('shopProcess.corporateIdentityCard')"
                                                      prop="identityCardFront">
                                            <img-upload
                                                    v-model="companyInfoForm.identityCardFront"
                                            />
                                        </el-form-item>
                                        <el-form-item class="idcard" label-width="0px" prop="identityCardLater">
                                            <img-upload
                                                    v-model="companyInfoForm.identityCardLater"
                                            />
                                        </el-form-item>
                                    </div>
                                    <div class="upload-example">
                                        <div class="example-box">
                                            <img src="~@/assets/img/example-img/idcard1.png">
                                            <div class="tips">{{ $t('shopProcess.identityCardFront') }}</div>
                                        </div>
                                        <div class="example-box">
                                            <img src="~@/assets/img/example-img/idcard2.png">
                                            <div class="tips">{{ $t('shopProcess.identityCardLater') }}</div>
                                        </div>
                                    </div>
                                    <div class="upload-tips">{{ $t('shopProcess.identityCardTips') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-form>

                <div
                        class="default-btn primary-btn"
                        :class="lang === 'en' ? 'en-foot-btn' : 'foot-btn'"
                        @click="updateCompanyInfo"
                >{{ $t('shopProcess.saveCompanyInfo') }}
                </div>
            </div>
            <!-- /工商信息 -->

            <!-- 签约信息 -->
            <div v-if="navStatus === 2" class="contract-info table-box">
                <!-- 签约类目 -->
                <div class="s-category-item s-item">
                    <div class="table-data-title">
                        <div class="text"><span class="stress">*</span>{{ $t('shopProcess.signingCategory') }}</div>
                        <div class="tips">
                            {{ $t('shopProcess.preSigned') }}
                            <span class="txt-bold">{{ signCategoryList.length }}</span>
                            {{ $t('shopProcess.piece') }}{{ $t('shopProcess.category') }}，
                            {{ $t('shopProcess.application') }}
                            <span class="txt-bold">{{ applyingCategoryNum }}</span>
                            {{ $t('shopProcess.piece') }}{{ $t('shopProcess.category') }}，
                            {{ $t('shopProcess.mostAdd') }}
                            <span class="txt-bold">200</span>
                            {{ $t('shopProcess.piece') }}{{ $t('shopProcess.category') }}
                        </div>
                        <div class="edit-btn">
                            <div class="default-btn primary-btn" @click="addSigningHandle(0)">{{
                                $t('shopProcess.addSigningCategory') }}
                            </div>
                            <div class="default-btn primary-btn" @click="cateAddOrUpdateHandle(0)">{{
                                $t('shopProcess.editSigningCategory') }}
                            </div>
                        </div>
                    </div>
                    <div class="si-content">
                        <el-table
                                :data="signCategoryList"
                                header-cell-class-name="table-header"
                                style="width: 100%"
                        >
                            <!-- height="306" -->
                            <el-table-column
                                    prop="name"
                                    :label="this.$i18n.t('shopProcess.categoryName')"
                            />
                            <el-table-column
                                    prop="parentName"
                                    :label="this.$i18n.t('shopProcess.parentCategoryName')"
                            />
                            <el-table-column
                                    prop="platformRate"
                                    :label="this.$i18n.t('shopProcess.categoryRate')"
                            >
                                <template slot-scope="{ row }">
                                    <span v-if="row.platformRate || row.platformRate === 0">{{ row.platformRate }} %</span>
                                    <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="customizeRate"
                                    :label="this.$i18n.t('shopProcess.customRate')"
                            >
                                <template slot-scope="{ row }">
                                    <span v-if="row.customizeRate || row.customizeRate === 0">{{ row.customizeRate }} %</span>
                                    <span v-else>--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="qualifications"
                                    :label="this.$i18n.t('shopProcess.categoryQualifications')"
                            >
                                <template slot-scope="{row}">
                                    <div v-if="row.imgs.length" class="img-box">
                                        <el-image
                                                v-for="(img,index) in row.imgs"
                                                :key="index"
                                                class="tab-img"
                                                :src="img"
                                                :preview-src-list="row.imgs"
                                        />
                                        <!-- <img
                                          v-for="(item, index) in row.imgs"
                                          :key="index"
                                          :src="item.indexOf('http')===-1 ? resourcesUrl + item : item"
                                          @click="picturePreview(item)"
                                        > -->
                                    </div>
                                    <span v-if="!row.imgs.length">--</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="categoryStatus"
                                    :label="this.$i18n.t('shopProcess.categoryStatus')"
                            >
                                <template slot-scope="scope">
                                    <div v-if="scope.row.categoryStatus === 1" class="tag-txt">{{ $t('publics.normal')
                                        }}
                                    </div>
                                    <div v-if="scope.row.categoryStatus === 0" class="tag-txt red-tag-txt">{{
                                        $t('publics.LowerShelf') }}
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <!-- 签约品牌 -->
                <div class="s-brand-item s-item">
                    <div class="table-data-title">
                        <div class="text">{{ $t('shopProcess.signingBrand') }}</div>
                        <div class="tips">
                            {{ $t('shopProcess.preSigned') }}
                            <span class="txt-bold">{{ signedBrands.length }}</span>
                            {{ $t('shopProcess.piece') }}{{ $t('shopProcess.brand') }}，
                            {{ $t('shopProcess.application') }}
                            <span class="txt-bold">{{ applyingBrandNum }}</span>
                            {{ $t('shopProcess.piece') }}{{ $t('shopProcess.brand') }}，
                            {{ $t('shopProcess.mostAdd') }}
                            <span class="txt-bold">50</span>
                            {{ $t('shopProcess.piece') }}{{ $t('shopProcess.brand') }}
                        </div>
                        <div class="edit-btn">
                            <div class="default-btn primary-btn" @click="addSigningHandle(1)">{{
                                $t('shopProcess.addSigningBrand') }}
                            </div>
                            <div class="default-btn primary-btn" @click="cateAddOrUpdateHandle(1)">{{
                                $t('shopProcess.editSigningBrand') }}
                            </div>
                        </div>
                    </div>
                    <div class="si-content main-container">
                        <div class="table-con">
                            <el-table
                                    :data="signedBrands"
                                    header-cell-class-name="table-header"
                                    style="width: 100%"
                            >
                                <!-- height="284" -->
                                <el-table-column
                                        prop="name"
                                        :label="this.$i18n.t('shopProcess.brandName')"
                                >
                                    <template slot-scope="scope">
                                        <span class="table-cell-text">{{ scope.row.name }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="firstLetter"
                                        :label="this.$i18n.t('shopProcess.firstLetter')"
                                />
                                <el-table-column
                                        prop="platformRate"
                                        :label="this.$i18n.t('shopProcess.brandLogo')"
                                >
                                    <template slot-scope="scope">
                                        <div class="brand-logo">
                                            <el-image
                                                    v-if="scope.row.imgUrl"
                                                    class="tab-img"
                                                    :src="scope.row.imgUrl.indexOf('http')===-1 ? resourcesUrl + scope.row.imgUrl : scope.row.imgUrl"
                                                    :preview-src-list="scope.row.imgUrl.indexOf('http')===-1 ? [resourcesUrl + scope.row.imgUrl] : [scope.row.imgUrl]"
                                            />
                                            <!-- <img v-if="scope.row.imgUrl" :src="scope.row.imgUrl.indexOf('http')===-1 ? resourcesUrl + scope.row.imgUrl : scope.row.imgUrl"> -->
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="imgs"
                                        :label="this.$i18n.t('shopProcess.brandQualifications')"
                                >
                                    <template slot-scope="{row}">
                                        <div v-if="row.imgs.length" class="brand-logo">
                                            <el-image
                                                    v-for="(img,index) in row.imgs"
                                                    :key="index"
                                                    class="tab-img"
                                                    :src="img"
                                                    :preview-src-list="row.imgs"
                                            />
                                            <!-- <img
                                              v-for="(item, index) in row.imgs"
                                              :key="index"
                                              :src="item.indexOf('http')===-1 ? resourcesUrl + item : item"
                                            > -->
                                        </div>
                                        <div v-if="!row.imgs.length">--</div>
                                        <!-- <pics-upload @imgUrl="getImgUrl(arguments, scope.$index)" /> -->
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="brandStatus"
                                        :label="this.$i18n.t('shopProcess.brandStatus')"
                                >
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.brandStatus === 1" class="tag-txt">{{ $t('publics.normal')
                                            }}
                                        </div>
                                        <div v-if="scope.row.brandStatus === 0" class="tag-txt red-tag-txt">{{
                                            $t('publics.LowerShelf') }}
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>

                <!-- 签约有效期 -->
                <div class="s-sign-item s-item">
                    <div class="table-data-title">
                        <div class="text"><span class="stress">*</span>{{ $t('shopProcess.validityPeriodOfContract') }}
                        </div>
                        <div class="tips">{{ $t('shopProcess.validPeriod') }}</div>
                    </div>
                    <div class="si-content">
                        <div>
                            <el-date-picker
                                    v-model="contractTimeRange"
                                    type="daterange"
                                    range-separator="至"
                                    :start-placeholder="this.$i18n.t('shopProcess.startTime')"
                                    :end-placeholder="this.$i18n.t('shopProcess.endTime')"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    size="small"
                                    @change="getContractTimeRange"
                                    :clearable="false"
                            />
                        </div>
                    </div>
                </div>
                <!-- 商家类型 -->
                <div class="s-sign-item s-item">
                    <div class="table-data-title">
                        <div class="text"><span class="stress">*</span>{{ $t('shopProcess.shopType') }}</div>
                    </div>
                    <div class="si-content">
                        <div>
                            <el-radio v-model="signingInfo.type" :label="0">{{ $t('shopProcess.ordinaryShop') }}
                            </el-radio>
                            <el-radio v-model="signingInfo.type" :label="1">{{ $t('shopProcess.preferredGoodShop') }}
                            </el-radio>
                        </div>
                    </div>
                </div>
                <div class="default-btn primary-btn foot-btn" @click="updateSigningInfo">{{
                    $t('shopProcess.saveContractInformation') }}
                </div>
            </div>
            <!-- /签约信息 -->

            <!-- 财务信息 -->
            <div v-if="navStatus === 3" class="financial-info">
                <el-form ref="financialInfo" label-width="140px" :model="financialInfo" :rules="financialInfoRules"
                         size="small">
                    <el-form-item label="商户号" prop="mchNo">
                        <el-input
                                v-model="financialInfo.mchNo"
                                type="textarea"
                                class="store-intro"
                                maxlength="200"
                                placeholder="请输入商户号"/>
                    </el-form-item>
                    <el-form-item label="应用id" prop="appId">
                        <el-input
                                v-model="financialInfo.appId"
                                type="textarea"
                                class="store-intro"
                                maxlength="200"
                                placeholder="请输入应用id"/>
                    </el-form-item>
                    <el-form-item label="应用秘钥" prop="apiKey">
                        <el-input
                                v-model="financialInfo.apiKey"
                                type="textarea"
                                :rows="4"
                                class="store-intro"
                                maxlength="200"
                                placeholder="请输入应用秘钥"/>
                    </el-form-item>
                </el-form>
                <div class="default-btn primary-btn foot-btn" @click="validationShopMchInfo">{{
                    $t('shopProcess.saveBasicInfo') }}
                </div>
            </div>
            <!-- /财务信息 -->

        </div>

        <category-add-or-update v-if="cateAddOrUpdateVisible" ref="cateAddOrUpdate"
                                :sign-category-list="signCategoryList" @closePopup="closePopup"/>
        <brand-add-or-update v-if="brandAddOrUpdateVisible" ref="brandAddOrUpdate" @closePopup="closePopup"/>
        <!-- 类目签约弹窗 -->
        <add-signing-category
                v-if="addSigningCategoryVisible"
                ref="addSigningCategory"
                :applyForSign="true"
                :signingCount="signCategoryList.length"
                @closePopup="closePopup"
        />
        <!-- 品牌签约弹窗 -->
        <add-signing-brand
                v-if="addSigningBrandVisible"
                ref="addSigningBrand"
                :applyForSign="true"
                :signingCount="signedBrands.length"
                @closePopup="closePopup"
        />
    </div>
</template>

<script>
  // import * as api from '@/api/platform/audit-shop'
  // import * as addrApi from '@/api/delivery/transport'
  import addSigningCategory from './signing-components/category-add-or-update'
  import addSigningBrand from './signing-components/brand-add-or-update'
  import ImgUpload from '@/components/img-upload'
  import {isCreditCode, removeHeadAndTailSpaces, validEmail, validNoEmptySpace} from '@/utils/validate'
  import categoryAddOrUpdate from './shopEdit/category-add-or-update'
  import brandAddOrUpdate from './shopEdit/brand-add-or-update'
  import moment from 'moment'

  export default {
    components: {
      ImgUpload,
      categoryAddOrUpdate,
      brandAddOrUpdate,
      addSigningCategory,
      addSigningBrand
    },
    data () {
      const validateMobile = (rule, value, callback) => {
        let phoneReg = /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/
        let mobile = /^(?:(?:\+|00)86)?1\d{10}$/
        if (phoneReg.test(value) || mobile.test(value)) {
          callback()
        } else {
          callback(new Error(this.$i18n.t('shopProcess.telErrorTips')))
        }
      }
      const validateEmail = (rule, value, callback) => {
        if (!validEmail(value) || value.indexOf(' ') !== -1) {
          callback(new Error(this.$i18n.t('shopProcess.emailErrorTips')))
        } else {
          callback()
        }
      }
      const vaildCreditCode = (rule, value, callback) => {
        if (!isCreditCode(value)) {
          callback(new Error(this.$i18n.t('shopProcess.creditCodeErrorTips')))
        } else {
          callback()
        }
      }
      const validateNotEmpty = (role, value, callback) => {
        if (validNoEmptySpace(value)) {
          callback(new Error(this.$i18n.t('shopProcess.inputAllSpace')))
        } else {
          callback()
        }
      }
      const validateNotEmptyRep = (role, value, callback) => {
        this.companyInfoForm.representative = this.companyInfoForm.representative.trim()
        if (this.companyInfoForm.representative === '' || this.companyInfoForm.representative.indexOf(' ') !== -1) {
          callback(new Error(this.$i18n.t('shopProcess.inputAllSpace')))
        } else {
          callback()
        }
      }
      return {
        removeHeadAndTailSpaces: removeHeadAndTailSpaces,
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        shopId: this.$route.query.shopId || 0,
        isSubmit: false,
        navStatus: 0,

        // 语言
        lang: window.localStorage.getItem('lang'),

        // 店铺审核状态
        shopAuditStatus: {},
        // 店铺状态
        shopStatus: {},

        // 店铺基本信息
        shopBasicInfo: {},
        contractTimeRange: [],
        shopBasicInfoRules: {
          merchantName: [
            {required: true, message: this.$i18n.t('shopProcess.merchantNameNotEmpty'), trigger: 'blur'},
            {min: 2, max: 10, message: this.$i18n.t('shopProcess.merchantNameErrorTips'), trigger: 'blur'},
            {validator: validateNotEmpty, trigger: 'blur'}

          ],
          shopName: [
            {required: true, message: this.$i18n.t('shopProcess.shopNameNotEmpty'), trigger: 'blur'},
            {min: 2, max: 20, message: this.$i18n.t('shopProcess.shopNameInputTips'), trigger: 'blur'},
            {validator: validateNotEmpty, trigger: 'blur'}
          ],
          // contactName: [
          //   { required: true, message: '联系人不能为空', trigger: 'blur' },
          //   { min: 2, max: 10, message: '联系人长度在2-10个字符之间', trigger: 'blur' },
          //   { validator: validateNotEmpty, trigger: 'blur' }
          // ],
          tel: [
            {required: true, message: this.$i18n.t('shopProcess.telNotEmpty'), trigger: 'blur'},
            {validator: validateMobile, trigger: 'blur'}
          ],
          email: [
            {required: true, message: this.$i18n.t('shopProcess.emailInputTips'), trigger: 'blur'},
            {validator: validateEmail, trigger: 'blur'}
          ],
          currentAddr: [
            {required: true, message: this.$i18n.t('shopProcess.addrInputTips'), trigger: ['blur', 'change']}
          ],
          shopAddress: [
            {required: true, message: this.$i18n.t('shopProcess.detailAddrNotEmpty'), trigger: 'blur'},
            {validator: validateNotEmpty, trigger: 'blur'}
          ],
          floor: [
            {required: true, message: '楼层不能为空', trigger: 'blur'},
            {min: 1, max: 50, message: '长度不能超过50', trigger: 'blur'}
          ],
          roomNumber: [
            {required: true, message: '房号不能为空', trigger: 'blur'},
            {min: 1, max: 50, message: '长度不能超过50', trigger: 'blur'}
          ],
          sort: [
            {required: true, message: '请输入排序', trigger: 'blur'},
          ],
          industryType: [
            {required: true, message: '请选择行业类型', trigger: 'change'}
          ],
          storeType: [
            {required: true, message: '请选择店铺类型', trigger: 'change'}
          ],
          shopLogo: [
            {required: true, message: this.$i18n.t('shopProcess.logoNotEmpty'), trigger: 'change'}
          ]
          // mobileBackgroundPic: [
          //   { required: true, message: this.$i18n.t('shopProcess.mobilePicNotEmpty'), trigger: 'change' }
          // ],
          // pcBackgroundPic: [
          //   { required: true, message: this.$i18n.t('shopProcess.pcPicNotEmpty'), trigger: 'change' }
          // ],
          // businessLicense: [
          //   { required: true, message: this.$i18n.t('shopProcess.businessLicenseNotEmpty'), trigger: 'change' }
          // ],
          // identityCardFront: [
          //   { required: true, message: this.$i18n.t('shopProcess.identityCardFrontNotEmpty'), trigger: 'change' }
          // ],
          // identityCardLater: [
          //   { required: true, message: this.$i18n.t('shopProcess.identityCardLaterNotEmpty'), trigger: 'change' }
          // ]
        },
        // 省市区
        currentAddr: [], // 选中地址
        addrList: [],
        addrListTreeProps: {
          value: 'areaId',
          label: 'areaName',
          children: 'areas'
        },

        // 店铺工商信息
        companyInfoForm: {
          creditCode: '',
          firmName: '',
          residence: '',
          representative: '',
          capital: '',
          foundTime: '',
          startTime: '',
          endTime: '',
          // businessScope: '',
          businessLicense: '',
          identityCardFront: '',
          identityCardLater: '',
          timeRange: []
        },
        // 店铺签约信息
        signingInfo: {
          contractStartTime: '', // 签约起始时间
          contractEndTime: '', // 签约终止时间
          type: '' // 店铺类型 0普通店铺 1优选好店
        },
        pickerOptions: {
          disabledDate (time) {
            const date = moment().add(0, 'days').startOf('days')
            return (
              time.getTime() >= date.valueOf()
            )
          }
        },
        companyInfoRule: {
          creditCode: [
            {required: true, message: this.$i18n.t('shopProcess.creditCodeInputTips'), trigger: 'blur'},
            {validator: vaildCreditCode, trigger: 'blur'}
          ],
          firmName: [
            {required: true, message: this.$i18n.t('shopProcess.firmNameNotEmpty'), trigger: 'blur'}
          ],
          residence: [
            {validator: validateNotEmpty, trigger: ['blur', 'change']}
          ],
          businessScope: [
            {required: true, message: this.$i18n.t('shopProcess.businessScopeNotEmpty'), trigger: 'blur'}
          ],
          timeRange: [
            {required: true, message: this.$i18n.t('shopProcess.businessTimeNotEmpty'), trigger: 'change'}
          ],
          businessLicense: [
            {required: true, message: this.$i18n.t('shopProcess.businessLicenseNotEmpty'), trigger: 'change'}
          ],
          representative: [
            {required: true, message: this.$i18n.t('shopProcess.representativeNotEmpty'), trigger: 'blur'},
            {validator: validateNotEmptyRep, trigger: 'blur'}
          ],
          identityCardFront: [
            {required: true, message: this.$i18n.t('shopProcess.identityCardFrontNotEmpty'), trigger: 'change'}
          ],
          identityCardLater: [
            {required: true, message: this.$i18n.t('shopProcess.identityCardLaterNotEmpty'), trigger: 'change'}
          ]
        },

        // 店铺分类签约信息
        signCategoryList: [],
        // 平台品牌签约信息
        signedBrands: [], // 平台品牌+自定义品牌
        // 自增签约品牌信息
        customizeBrandList: [],
        cateAddOrUpdateVisible: false,
        brandAddOrUpdateVisible: false,
        addSigningCategoryVisible: false,
        addSigningBrandVisible: false,

        // 店铺财务信息
        settlementAccounts: [],

        // 定位
        show: false,
        center: {
          lng: 113.327955,
          lat: 23.136783
        },
        center2: {
          lng: 113.327955,
          lat: 23.136783
        },
        zoom: 18,
        baiduIndex: false,

        applyingCategoryNum: 0, // 申请中类目数量
        applyingBrandNum: 0, // 申请中品牌数量

        financialInfo: {
          mchNo: '',
          appId: '',
          apiKey: ''
        },
        financialInfoRules: {
          mchNo: [{required: true, message: '商户号不能为空', trigger: 'blur'}],
          appId: [{required: true, message: '应用id不能为空', trigger: 'blur'}],
          apiKey: [{required: true, message: '应用秘钥不能为空', trigger: 'blur'}],
        },
        industryTypeList: [],
        shopTypes: [],
        shopTypeList: []
      }
    },
    created () {
      // 查询基本信息
      this.switchNav(0)
    },

    mounted () {
      // 获取地址列表
      this.getAddrList()
      // 店铺审核状态
      this.queryShopAuditStatus()
      // 初始化地图数据
      this.setCenter()
      // 行业类型
      this.getIndustryType()
      // 店铺类型
      this.getShopTypeList()
    },

    methods: {
      // 获取行业类型
      getIndustryType () {
        let type = 'industry_Type'
        this.$http({
          url: this.$http.adornUrl(`/sys/dictData/getByType/${type}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.industryTypeList = data
        })
      },
      // 获取店铺类型
      getShopTypeList () {
        let type = 'shop_type'
        this.$http({
          url: this.$http.adornUrl(`/sys/dictData/getByType/${type}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.shopTypeList = data
        })
      },
      handler ({BMap, map}) {
        this.baiduIndex = true
        this.center = {...this.center2}
      },
      switchNav (value) {
        this.navStatus = value
        if (value === 1) {
          // 查询工商信息
          this.queryShopBusinessInfo()
        } else if (value === 2) {
          // 查询分类签约信息
          this.getSignCategoryList()
          // 查询品牌签约信息
          this.getSignBrandList()

          // 查询分类申请信息
          this.getSignCategoryList(0)
          // 查询品牌申请信息
          this.getSignBrandList(0)
        } else if (value === 3) {
          // 查询财务信息
          this.queryShopFinancialInfo()
        } else {
          // 查询基本信息
          this.queryShopBasicInfo()
        }
        this.$forceUpdate()
      },

      /**
       * 店铺审核状态
       */
      queryShopAuditStatus () {
        this.$http({
          url: this.$http.adornUrl(`/shop/shopAuditing/${this.shopId}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.shopAuditStatus = data
          // this.shopStatus = data.shopDetail
        })
        // api.getShopAuditStatus(this.shopId).then(data => {
        //   this.shopAuditStatus = data
        //   this.shopStatus = data.shopDetail
        // })
      },

      /**
       * 查询基本信息
       */
      queryShopBasicInfo () {
        this.$http({
          url: this.$http.adornUrl('/platform/shopDetail/info'),
          method: 'get',
          params: this.$http.adornParams({
            shopId: this.shopId
          })
        }).then(({data}) => {
          this.shopBasicInfo = data
          if (this.shopBasicInfo.storeType) {
            this.shopTypes = this.shopBasicInfo.storeType.split(',')
          }
          this.signingInfo.type = data.type
          if (data.contractStartTime && data.contractEndTime) {
            this.signingInfo.contractStartTime = data.contractStartTime
            this.signingInfo.contractEndTime = data.contractEndTime
            this.contractTimeRange = [data.contractStartTime, data.contractEndTime]
          }
          this.shopBasicInfo.currentAddr = [
            data.provinceId,
            data.cityId,
            data.areaId
          ]
          if (data.shopLat && data.shopLng) {
            // this.center2 = {
            //   lng: Number.parseFloat(data.shopLng),
            //   lat: Number.parseFloat(data.shopLat)
            // }
            if (this.baiduIndex) {
              this.center = {
                lng: Number.parseFloat(data.shopLng),
                lat: Number.parseFloat(data.shopLat)
              }
            } else {
              this.center2 = {
                lng: Number.parseFloat(data.shopLng),
                lat: Number.parseFloat(data.shopLat)
              }
            }
          }
          this.shopStatus.shopStatus = data.shopStatus
        })
      },
      getShopLogoImgUrl (imgUrl) {
        this.shopBasicInfo.shopLogo = imgUrl
      },
      /**
       * 省市区
       */
      getAddrList () {
        // addrApi.listAreaOfEnable({}).then(data => {
        //   this.addrList = treeDataTranslate(data, 'areaId', 'parentId')
        // })
        this.$http({
          url: this.$http.adornUrl(`/admin/area/listAreaOfEnable`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.addrList = data
        })
      },
      /**
       * 监听地址改变
       */
      handleAddrChange (value) {
        if (value.length > 0) {
          const labels = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels
          this.shopBasicInfo.province = labels[0]
          this.shopBasicInfo.provinceId = value[0]
          this.shopBasicInfo.city = labels[1]
          this.shopBasicInfo.cityId = value[1]
          this.shopBasicInfo.area = labels[2]
          this.shopBasicInfo.areaId = value[2]
          this.mapLocation(true)
        }
      },

      shopAddressChange () {
        this.mapLocation(true)
      },

      /**
       * 查询工商信息
       */
      queryShopBusinessInfo () {
        this.$http({
          url: this.$http.adornUrl('/platform/shopCompany'),
          method: 'get',
          params: this.$http.adornParams({
            shopId: this.shopId
          })
        }).then(({data}) => {
          this.companyInfoForm = data
          this.companyInfoForm.timeRange = []
          if (data.startTime && data.endTime) {
            this.companyInfoForm.timeRange.push(data.startTime)
            this.companyInfoForm.timeRange.push(data.endTime)
          } else {
            this.companyInfoForm.timeRange = []
          }
        })
      },
      /**
       * 营业时间赋值
       */
      handleTimeData (date) {
        // 单纯视图更新无限改用强制刷新this.$forceUpdate()
        this.$set(this.companyInfoForm, 'timeRange', [date[0], date[1]])
        this.$forceUpdate()
        this.companyInfoForm.startTime = date[0]
        this.companyInfoForm.endTime = date[1]
      },

      /**
       * 注册资本输入框校验
       */
      changeNum () {
        const capital = this.companyInfoForm.capital
        this.companyInfoForm.capital = this.checkInput(capital)
        if (Number.parseFloat(this.companyInfoForm.capital) === 0) {
          this.companyInfoForm.capital = 0
        }
        if (Number.parseFloat(this.companyInfoForm.capital) > 99999999) {
          this.companyInfoForm.capital = 99999999
        }
      },
      /**
       * input输入框只允许输入正数和小数(保留小数点后两位)
       */
      checkInput (num) {
        if (num) {
          var tmpVal = num.replace(/[^\d^\\.]/g, '')
          var reg = /^(0|([1-9]\d*))(\.\d{1,2})?$/ // 最多允许后输入两位小数
          if (!reg.test(tmpVal)) {
            tmpVal = tmpVal + ''
            tmpVal = tmpVal.substring(0, tmpVal.indexOf('.') + 3)
            var n = (tmpVal.split('.')).length - 1
            if (n > 1) {
              tmpVal = tmpVal.substring(0, tmpVal.indexOf('.'))
            }
          }
          return tmpVal
        } else {
          return ''
        }
      },
      /**
       * 输入框不允许输入'-'或'+'
       */
      channelInputLimit (e) {
        const key = e.key
        if (key === '-' || key === '+') {
          e.returnValue = false
          return false
        }
        return true
      },

      /**
       * 签约类目列表
       */
      getSignCategoryList (status = 1) {
        this.$http({
          url: this.$http.adornUrl('/prod/category/signingInfoByShopId'),
          method: 'get',
          params: this.$http.adornParams({
            shopId: this.shopId,
            status: status // 签约状态：1：已通过 0待审核 -1未通过
          })
        }).then(({data}) => {
          if (data) {
            if (status === 1) {
              this.signCategoryList = data
              this.signCategoryList.forEach(item => {
                item.imgs = item.qualifications ? item.qualifications.split(',') : []
                if (item.imgs.length) {
                  item.imgs.forEach(img => {
                    img = this.getImgSrc(img)
                  })
                }
              })
            } else if (status === 0) {
              this.applyingCategoryNum = data.length
            }
          }
        })
      },
      /**
       * 获取签约品牌列表
       */
      getSignBrandList (status = 1) {
        this.$http({
          url: this.$http.adornUrl('/platform/brand/listSigningByShopId'),
          method: 'get',
          params: this.$http.adornParams({
            shopId: this.shopId,
            status: status // 签约状态：1：已通过 0待审核 -1未通过
          })
        }).then(({data}) => {
          if (status === 1) {
            // data.platformBrandList.length ? this.signedBrands.push(...data.platformBrandList) : this.signedBrands = []
            this.signedBrands = data.platformBrandList
            this.signedBrands.forEach(el => {
              el.imgs = el.qualifications ? el.qualifications.split(',') : []
              if (el.imgs.length) {
                el.imgs.forEach(img => {
                  img = this.getImgSrc(img)
                })
              }
            })
          } else if (status === 0) {
            this.applyingBrandNum = data.platformBrandList.length
          }
        })
      },

      /**
       * 获取图片路径
       */
      getImgSrc (img) {
        if (!img) {
          return ''
        }
        if (img.indexOf('http://') === 0 || img.indexOf('https://') === 0) {
          return img
        }
        return this.resourcesUrl + img
      },

      /**
       * 编辑签约信息弹窗
       */
      addSigningHandle (type) {
        if (type === 0) {
          this.addSigningCategoryVisible = true
          this.$nextTick(() => {
            this.$refs.addSigningCategory.init(this.shopId)
          })
          return
        }
        if (type === 1) {
          this.addSigningBrandVisible = true
          this.$nextTick(() => {
            this.$refs.addSigningBrand.init(this.shopId)
          })
        }
      },
      /**
       * 编辑签约信息弹窗
       * @param {Number} type 签约类型 0:类别 1:品牌
       */
      cateAddOrUpdateHandle (type) {
        if (type === 0) {
          this.cateAddOrUpdateVisible = true
          this.$nextTick(() => {
            this.$refs.cateAddOrUpdate.init(this.shopId)
          })
        } else if (type === 1) {
          this.brandAddOrUpdateVisible = true
          this.$nextTick(() => {
            this.$refs.brandAddOrUpdate.init(this.shopId)
          })
        }
      },

      /**
       * 关闭弹窗
       */
      closePopup (val) {
        if (val === 'category') {
          this.addSigningCategoryVisible = false
          this.cateAddOrUpdateVisible = false
          this.getSignCategoryList()

          // 查询分类申请信息
          this.getSignCategoryList(0)
        } else if (val === 'brand') {
          this.addSigningBrandVisible = false
          this.brandAddOrUpdateVisible = false
          this.getSignBrandList()
          // 查询品牌申请信息
          this.getSignBrandList(0)
        }
      },

      /**
       * 获取图片路径
       */
      getImgUrl (imgUrl, index) {
        const url = imgUrl[0]
        this.signCategoryList[index].qualifications = this.signCategoryList[index].qualifications === '' ? url : this.signCategoryList[index].qualifications + ',' + url
      },

      /**
       * 查询财务信息
       */
      queryShopFinancialInfo () {
        this.$http({
          url: this.$http.adornUrl(`/platform/shopMch/queryByShopId`),
          method: 'get',
          params: this.$http.adornParams({
            shopId: this.shopId,
          })
        }).then(({data}) => {
          if (data) {
            this.financialInfo = data
          }
        })
      },

      // 获取签约有效期
      getContractTimeRange (date) {
        this.signingInfo.contractStartTime = date[0]
        this.signingInfo.contractEndTime = date[1]
      },

      // 更新基本信息
      updateShopBasicInfo () {
        this.shopBasicInfo.storeType = this.shopTypes.join(',')
        this.$refs['shopBasicInfo'].validate((valid) => {
          if (!valid) {
            return
          }
          this.$http({
            url: this.$http.adornUrl('/platform/shopDetail'),
            method: 'PUT',
            data: this.$http.adornData(this.shopBasicInfo)
          }).then(({data}) => {
            this.$message({
              message: this.$i18n.t('shopProcess.baseInfoUpdateSuccess'),
              type: 'success',
              duration: 1000
            })
            this.queryShopBasicInfo()
          })
        })
      },

      /**
       * 储存工商信息
       */
      updateCompanyInfo () {
        this.companyInfoForm.shopId = this.shopId
        this.$refs['companyInfoForm'].validate((valid) => {
          if (!valid) {
            return
          }
          this.$http({
            url: this.$http.adornUrl('/platform/shopCompany'),
            method: 'PUT',
            data: this.$http.adornData(this.companyInfoForm)
          }).then(({data}) => {
            this.$message({
              message: this.$i18n.t('shopProcess.businessInfoUpdateSuccess'),
              type: 'success',
              duration: 1000
            })
            this.queryShopBusinessInfo()
          })
        })
      },

      /**
       * 更新签约信息
       */
      updateSigningInfo () {
        if (this.isSubmit) {
          return
        }
        this.isSubmit = true
        this.signingInfo.shopId = this.shopId
        this.$http({
          url: this.$http.adornUrl('/platform/shopDetail/updateSigningInfo'),
          method: 'PUT',
          data: this.$http.adornData(this.signingInfo)
        }).then(({data}) => {
          this.$message({
            message: this.$i18n.t('shopProcess.contractInfoUpdateSuccess'),
            type: 'success',
            duration: 1000
          })
          this.isSubmit = false
          // 更新签约信息成功后，需要更新店铺基本信息，因为店铺状态有可能发生改变
          this.queryShopBasicInfo()
        }).catch(({e}) => {
          this.isSubmit = false
        })
      },

      /**
       * 初始化地图数据
       */
      setCenter () {
        this.center = null
        this.center = {
          lng: 113.327955,
          lat: 23.136783
        }
        this.zoom = 18
      },
      /**
       * 获取地图移动后回调的位置参数
       */
      syncCenterAndZoom (e) {
        this.setCenter()
        const {lng, lat} = e.target.getCenter()
        this.center.lng = lng
        this.center.lat = lat
        this.zoom = e.target.getZoom()
        this.shopBasicInfo.shopLng = lng
        this.shopBasicInfo.shopLat = lat
      },
      /**
       * 关闭地图说明标签
       */
      infoWindowClose () {
        this.show = false
      },
      /**
       * 打开地图说明标签
       */
      infoWindowOpen () {
        this.show = true
      },
      // 定位地图
      mapLocation (isTrue) {
        let area = ''
        const that = this
        if (isTrue === true) {
          // 选择省市区时，定位地图
          if (this.shopBasicInfo.provinceId) {
            area = this.shopBasicInfo.province
            this.zoom = 6
            if (this.shopBasicInfo.cityId) {
              area = area + this.shopBasicInfo.city
              this.zoom = 10
              if (this.shopBasicInfo.areaId) {
                area = area + this.shopBasicInfo.area
                this.zoom = 14
                if (this.shopBasicInfo.shopAddress !== null) {
                  // 详细地址
                  area = this.shopBasicInfo.province + this.shopBasicInfo.city + this.shopBasicInfo.area + this.shopBasicInfo.shopAddress
                  this.zoom = 18
                }
              }
            }
          }
        } else {
          // this.center = null
          if (!this.shopBasicInfo.provinceId || !this.shopBasicInfo.cityId || !this.shopBasicInfo.areaId) {
            this.shopBasicInfo.shopAddress = null
            this.$message({
              message: this.$i18n.t('admin.selePCD'),
              type: 'error',
              duration: 1000
            })
            return
          }
          let point = new BMap.Point(this.center.lng, this.center.lat)
          let gc = new BMap.Geocoder()
          gc.getLocation(point, function (rs) {
            that.shopBasicInfo.shopAddress = rs.address.replace(that.shopBasicInfo.province + that.shopBasicInfo.city + that.shopBasicInfo.area, '')
          })
          // area = this.shopBasicInfo.province + this.shopBasicInfo.city + this.shopBasicInfo.area + this.shopBasicInfo.shopAddress
          this.zoom = 18
        }
        this.center = area || this.center
        this.isEditAddr = true
      },
      validationShopMchInfo () {
        this.$refs['financialInfo'].validate((valid) => {
          if (!valid) {
            return
          }
          if(!this.financialInfo.shopId){
            this.financialInfo.shopId = this.shopId
          }
          this.$http({
            url: this.$http.adornUrl('/platform/shopMch/update'),
            method: 'PUT',
            data: this.$http.adornData(this.financialInfo)
          }).then(({data}) => {
            this.$message({
              message: this.$i18n.t('信息保存成功'),
              type: 'success',
              duration: 1000,
              onClose: () => {
              }
            })
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
    .app-container {
        margin-bottom: 30px;
    }

    .app-container.shop-detail {
        font-size: 14px;
        color: #333;

        .head-title {
            margin-bottom: 15px;
        }

        .red-tag-txt {
            color: #ff4949;
        }

        // 导航栏
        .nav-box {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 100%;

            .nav {
                position: relative;
                display: inline-block;
                display: flex;
                white-space: nowrap;

                .nav-item {
                    margin: 0;
                    font-size: 14px;
                    line-height: 1em;
                    padding: 15px 20px;
                    color: #333;
                    cursor: pointer;
                }

                .nav-item.active {
                    color: #155BD4;
                    // background: rgba(24,144,255, 0.06);
                    border-radius: 4px 4px 0 0;
                    border-bottom: 2px solid #155bd4;
                }
            }
        }

        .nav-box::before {
            position: absolute;
            right: 0;
            left: 0;
            bottom: 0;
            border-bottom: 1px solid #f0f0f0;
            content: '';
        }

        .shop-info-box {
            // 公共
            p {
                margin: 0;
            }

            p.tit {
                display: inline-block;
                text-align: right;
            }

            .txt-bold {
                color: #333;
            }

            .asterisk {
                color: red;
                padding-right: 5px;
            }

            .table-box {
                display: block;
                width: 100%;
                margin: 20px 0;

                & > > > .el-table th, .el-table td {
                    border-color: #f0f0f0;
                }

                & > > > .el-table__body-wrapper {
                    max-height: 245px;
                    overflow-y: scroll;
                    scrollbar-width: none; /* Firefox */
                    -ms-overflow-style: none; /* IE 10+ */
                }

                & > > > .el-table__body-wrapper::-webkit-scrollbar {
                    display: none; /* Chrome Safari */
                }

                & > > > .el-table__body {
                    width: 100%;
                }
            }

            // 图片框大小统一
            & > > > .plugin-images {
                display: block;
                width: auto;
                height: 130px;

                img {
                    vertical-align: top;
                }
            }

            & > > > .el-upload--picture-card,
            & > > > .el-upload-list--picture-card .el-upload-list__item {
                width: 130px;
                height: 130px;
                line-height: 130px;
                margin: 0;
            }

            & > > > .el-upload-list--picture-card {
                display: block;
                width: auto;
                height: 100%;
            }

            // 表单项下间距
            .ci-wrapper,
            .basic-info-box {
                .el-form-item {
                    margin-bottom: 30px;
                }
            }

            .license-content {
                display: flex;
            }

            // 图片示例
            .upload-example {
                display: flex;
                margin-left: 120px;

                .example-box {
                    margin-left: 0;

                    &:nth-child(2) {
                        margin-left: 30px;
                    }
                }
            }

            // 示例框
            .example-box {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 130px;
                height: 130px;
                background: #FFFFFF;
                border: 1px solid #EAEAEA;
                border-radius: 3px;
                box-sizing: border-box;
                margin-left: 30px;

                img {
                    display: block;
                    width: auto;
                    max-width: 100%;
                    height: auto;
                    max-height: 100%;
                }

                .tips {
                    position: absolute;
                    left: -1px;
                    bottom: 0;
                    width: 130px;
                    height: 20px;
                    line-height: 20px;
                    font-size: 12px;
                    color: #fff;
                    background: rgba(51, 51, 51, 0.5);
                    text-align: center;
                    border-radius: 0px 0px 3px 3px;
                }
            }

            // 图片
            .tab-img {
                width: 60px;
                height: 60px;
                margin-right: 5px;
                cursor: pointer;
            }

            // 表格上的标题
            .table-data-title {
                display: flex;
                align-items: center;

                .text {
                    font-size: 16px;
                    min-width: 80px;

                    .stress {
                        color: #FF2120;
                        padding-right: 5px;
                    }
                }

                .tips {
                    font-size: 12px;
                    color: #999;
                    margin-left: 10px;
                }

                .edit-btn {
                    margin-left: auto;
                    cursor: pointer;
                }
            }

            // 基本信息模块
            .basic-info-mod {
                // 审核状态
                .audit-status {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    background: #f7f8fa;
                    padding: 20px;
                    line-height: 1em;
                    margin-top: 20px;
                    color: #333;

                    p.tit {
                        width: 95px;
                    }

                    .week {
                        color: #666;
                    }
                }

                .addr-select {
                    display: block;
                    width: 100%;
                }

                .bg-img {
                    display: flex;
                    justify-content: flex-start;

                    .business-license-box {
                        margin-right: 30px;

                        .img-tips {
                            display: block;
                            text-align: center;
                            font-size: 12px;
                            color: #666;
                            line-height: 1.5em;
                            margin-top: 8px;

                            p {
                                margin: 0;
                                padding: 0;
                            }
                        }
                    }
                }

                .id-box {
                    margin-bottom: 20px;

                    .upload-content {
                        .upload-img {
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;

                            & > > > .el-form-item {
                                margin-bottom: 10px;
                            }

                            div {
                                &:nth-child(2) {
                                    margin-left: 30px;
                                }
                            }

                            .disabled-upload {
                                & > > > .el-upload {
                                    background: #f5f7fa;
                                }
                            }
                        }

                        .upload-img.en-upload-img {
                            & > > > .el-form-item.is-error {
                                margin-bottom: 45px;
                            }
                        }

                        .upload-img.zh-upload-img {
                            & > > > .el-form-item.is-error {
                                margin-bottom: 22px;
                            }
                        }
                    }

                    .upload-tips {
                        margin-left: 120px;
                    }
                }

                // 信息
                .basic-info-list {
                    margin-top: 30px;

                    .basic-info-box {
                        display: flex;
                        align-items: top;
                        justify-content: flex-start;
                        width: 100%;

                        .left-info {
                            width: 40%;
                            min-width: 300px;
                            margin-right: 80px;
                            text-align: left;
                        }

                        .right-info {
                            width: 45%;
                            min-width: 300px;
                        }
                    }

                    .basic-info-item {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        padding: 20px 30px;
                    }

                    .upload-tips {
                        font-size: 12px;
                        color: #999;
                        height: auto;
                        line-height: 1.5em;
                        margin-top: 5px;
                    }
                }

                .foot-btn {
                    margin-left: 120px;
                }
            }

            // 工商信息
            .business-info-mod {
                margin-top: 30px;

                .ci-wrapper {
                    display: flex;
                    justify-content: flex-start;
                    width: 100%;

                    .capital-int {
                        & > > > .el-input__inner {
                            padding-right: 0 !important;
                            border-radius: 2px 0 0 2px !important;
                        }
                    }

                    & > > > .el-date-editor.el-input,
                    & > > > .el-date-editor.el-input__inner {
                        width: 100%;
                    }

                    & > > > .el-date-editor .el-range-separator {
                        width: auto !important;
                    }

                    .left-info {
                        // width: 504px;
                        width: auto;
                        min-width: 500px;
                        max-width: 40%;

                        .btn-box {
                            display: flex;
                            margin-left: 134px;
                            margin-bottom: 40px;

                            .prev-btn {
                                margin-right: 13px;
                            }
                        }
                    }

                    .right-info {
                        width: 440px;
                        width: 45%;
                        min-width: 300px;
                        max-width: 500px;
                        margin-left: 30px;

                        .business-license-box {
                            .license-content {
                                display: flex;
                            }
                        }

                        .id-box {
                            .upload-content {
                                .upload-img {
                                    display: flex;

                                    div {
                                        &:nth-child(2) {
                                            margin-left: 20px;
                                        }
                                    }
                                }

                                .upload-example {
                                    display: flex;
                                    // margin-top: 15px;
                                    margin-left: 134px;

                                    .example-box {
                                        margin-left: 0;
                                        padding: 5px;

                                        &:nth-child(2) {
                                            margin-left: 20px;
                                        }
                                    }
                                }

                                .upload-tips {
                                    margin-left: 120px;
                                }
                            }
                        }

                        .img-static {
                            display: block;
                            width: 120px;
                            height: 120px;
                        }

                        .img-static:not(:first-child) {
                            margin-left: 20px;
                        }

                        // 示例框
                        .example-box {
                            position: relative;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 120px;
                            height: 120px;
                            background: #FFFFFF;
                            border: 1px solid #EAEAEA;
                            border-radius: 3px;
                            box-sizing: border-box;
                            margin-left: 20px;

                            img {
                                display: block;
                                width: auto;
                                max-width: 100%;
                                height: auto;
                                max-height: 100%;
                            }

                            .tips {
                                position: absolute;
                                left: -1px;
                                bottom: 0;
                                width: 120px;
                                height: 20px;
                                line-height: 20px;
                                font-size: 12px;
                                color: #fff;
                                background: rgba(51, 51, 51, 0.5);
                                text-align: center;
                                border-radius: 0px 0px 3px 3px;
                            }
                        }

                        .upload-tips {
                            font-size: 12px;
                            color: #999;
                            height: auto;
                            line-height: 1.5em;
                            margin-top: 10px;
                        }

                        // 图片上传框样式修改
                        & > > > .el-upload {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 120px;
                            height: 121px;
                            background: #FFFFFF;
                            border: 1px solid #EAEAEA;
                            border-radius: 3px;
                            box-sizing: border-box;
                            // img {
                            //   width: 120px;
                            // }
                            .el-icon-plus {
                                font-size: 22px;
                                color: #EAEAEA;
                            }
                        }
                    }
                }

                .foot-btn {
                    margin-left: 150px;
                }

                .en-foot-btn {
                    margin-left: 200px;
                }
            }

            // 签约信息
            .contract-info {
                width: 100%;
                margin-top: 30px;
                margin-bottom: 80px;

                .s-item {
                    .si-content {
                        margin-top: 12px;

                        .img-box {
                            display: flex;
                            align-items: center;
                            // justify-content: center;
                            img {
                                // 图片自适应
                                // width: auto;
                                // height: auto;
                                // max-width: 57px;
                                // max-height: 57px;
                                // 固定宽高
                                width: 57px;
                                height: 57px;
                            }

                            img:not(:last-child) {
                                margin-right: 5px;
                            }
                        }

                        .brand-logo {
                            display: flex;
                            align-items: flex-start;

                            img {
                                // 图片自适应
                                // width: auto;
                                // height: auto;
                                // max-width: 57px;
                                // max-height: 57px;
                                // 固定宽高
                                width: 57px;
                                height: 57px;
                            }

                            img:not(:last-child) {
                                margin: 5px;
                            }
                        }
                    }

                    .table-con {
                        padding: 0;
                    }
                }

                .s-brand-item {
                    margin: 50px 0 40px;
                }

                .s-sign-item {
                    margin-bottom: 30px;
                }

                table {
                    .table-item {
                        .img-item {
                            img {
                                vertical-align: middle;
                                width: 38px;
                                height: 38px;
                                background: #EBF1FF;
                                border-radius: 19px;
                                margin: auto;
                            }
                        }
                    }
                }

                .btn-box {
                    display: flex;
                    justify-content: center;
                    margin-bottom: 39px;

                    .prev-btn {
                        margin-right: 13px;
                    }
                }

                & > > > .el-range-editor.el-input__inner {
                    width: auto;
                }
            }

            // 财务信息
            .financial-info {
                margin: 30px 0;

                .table-data-title {
                    margin-bottom: 20px;
                }

                .table-box {
                    margin-top: 10px;

                    & > > > .el-table__body-wrapper {
                        height: auto;
                        max-height: 100%;
                    }
                }
            }

        }

        // 地图
        .map {
            width: 100%;
            height: 300px;
        }
    }
</style>
